<template>

  <div id="header" style="background: rgba(255, 255, 255, 0); top: 0px; border-bottom: 0px;">
    <div class="header-wrap">
      <div class="header-l" @click='$router.push("/home")'>
        <a
          href="javascrpt:;"
          id="backBtn"
          style="width: 0.3rem; height: 0.3rem; "
        >
          <i class="backDetail" ></i>
        </a>
      </div>
      <div style="">
        <div class="header-title">
          <h1>
            <ul class="clearfix">
              <li class="select">
                <p>商品</p>
                <span></span>
              </li>
              <li class>
                <p>评价</p>
                <span></span>
              </li>
              <li class>
                <p>详情</p>
                <span></span>
              </li>
              <li class>
                <p>推荐</p>
                <span></span>
              </li>
            </ul>
          </h1>
        </div>
      </div>
      <div class="header-r">
        <a href="javascript:;" style="width: 0.3rem; height: 0.3rem; ">
          <i class="toHome"></i>
        </a>
        <a
          href="javascript:;"
          style="width: 0.3rem; height: 0.3rem;"
        >
          <i class="shareDetail"></i>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';

Vue.use(Tab);
Vue.use(Tabs);
export default {

}
</script>

<style lang='stylus' scoped>
#header
    &::after
        content ""
        display block 
        clear both
    position: fixed;
    background: #FFF;
    position: absolute;
    z-index: 21;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    border-bottom: solid 0.1px #EEE;
    .header-wrap {
        display: block;
        min-width: 3.2rem;
        max-width: 6.4rem;
        height: 0.44rem;
        margin: 0 auto;
        text-align: center;
    }
    .header-l 
        display: block;
        width: 0.3rem;
        height: 100%;
        display flex
        align-items center
        position: absolute;
        top: 0;
        left: 0.066rem;
        a
            position: relative;
            z-index: 1;
            display: inline-block;
            i
                display: block;
                width: 100%;
                height: 100%;
                background: url('https://api.10street.cn/wap/images/returnDetail1.png') no-repeat center center;
                background-size: 99%;
            
    .header-r
        height 100%
        display flex
        align-items center
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0.088rem;
        font-size: 0;
        text-align: right;
        a
            position: relative;
            z-index: 1;
            display: inline-block;
            vertical-align: top;
            i  
                display: block;
                width: 100%;
                height: 100%;
            .toHome
                background: url('https://api.10street.cn/wap/images/toHome.png') no-repeat center center;
                background-size: 99%;
            .shareDetail
                background: url('https://api.10street.cn/wap/images/toShare.png') no-repeat center center;
                background-size: 99%;

    .header-title 
        display: inline-block;
        margin: 0 auto;
        h1 
            font-size: 0.125rem;
            line-height: 0.22rem;
            height: 0.44rem;
            color: #232326;
            li
                float: left;
                width: 0.44rem;
                text-align: center;
                p
                    font-weight 500
                    margin: 0.1rem 0 0.022rem;
                span 
                    display: block;
                    width: 0.286rem;
                    height: 0.022rem;
                    margin: auto;
            .select
                p
                    font-size: 0.143rem;
                    font-weight: 600;
                span 
                    background: #FF4A42;

</style>